<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <h2 class="text-2xl font-bold">Counter Demo</h2>

    <div class="flex gap-4 items-center">
      <a-button type="primary" @click="counter.increment"> Count is: {{ counter.count }} </a-button>
      <span class="text-lg">Double is: {{ counter.doubleCount }}</span>
    </div>

    <div class="mt-4 p-4 bg-gray-100 rounded">
      <p class="text-sm text-gray-500">State is managed by Pinia</p>
    </div>
  </div>
</template>
